<template>
  <h1>toRefs的使用</h1>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <hr />
  <button @click="age++">一年又一年</button>
</template>

<script setup>
// toRefs: 把一个reactive响应式对象变成ref变量。
import { ref, isRef, unref, reactive, toRefs } from "vue";

// 使用reactive定义的响应式数据，如果解构了，响应式会丢失
// 怎么解决？toRefs
// let { name, age } = reactive({ name: "wc", age: 18 });

// 保持响应式
// 作用：把对象中的每一个属性做一次包装成为响应式数据
// 响应式数据展开的时候使用，解构响应式数据的时候使用
let { name, age } = toRefs(reactive({ name: "wc", age: 18 }));
</script>

<style lang="scss" scoped>
</style>